<template>
  <view class="product-intro">
    <!-- 七个产品 下单之后 产品简介-->
    <template v-if="item.product == '问一下'">
      <view class="item-tip text-ellipsis">
        <text class="tip-item">{{ item.area_name }}</text>
        <text class="tip-item">{{ item.serve_type }}</text>
        <text class="tip-item">{{ item.serve_time }}</text>
      </view>
      <view class="item-tip text-ellipsis" v-if="item.serve_type == '线下面谈'">
        <text class="tip-item"><image src="@/static/img/order-tip-time.png" class="order-tip-img" mode="widthFix"></image>{{ item.server_time_text }}</text>
      </view>
      <view class="item-tip text-ellipsis" v-if="item.serve_type == '线下面谈'">
        <text class="tip-item"><image src="@/static/img/order-tip-loc.png" class="order-tip-img" mode="widthFix"></image>{{ item.server_address }}</text>
      </view>

    </template>
    <template v-if="item.product == '陪同办'">
      <view class="item-tip text-ellipsis">
        <text class="tip-item">{{ item.server_content }}</text>
        <text class="tip-item">{{ item.serve_time }}</text>
      </view>
      <view class="item-tip text-ellipsis" v-if="item.server_content != '代打电话'">
        <text class="tip-item"><image src="@/static/img/order-tip-time.png" class="order-tip-img" mode="widthFix"></image>{{ item.server_time_text }}</text>
      </view>
      <view class="item-tip text-ellipsis" v-if="item.server_content != '代打电话'">
        <text class="tip-item"><image src="@/static/img/order-tip-loc.png" class="order-tip-img" mode="widthFix"></image>{{ item.server_address }}</text>
      </view>
      <view class="item-tip text-ellipsis">
        <text class="tip-item">{{ item.area_name }}</text>
        <text class="tip-item">{{ item.serve_type }}</text>
      </view>
    </template>
    <template v-if="item.product == '私人律师'">
      <view class="item-tip text-ellipsis">
        <text class="tip-item">{{ item.server_dead }}</text>
        <text class="tip-item">{{ item.server_grade }}服务</text>
        <text class="tip-item">服务时间、地点面议</text>
      </view>
      <view class="item-tip text-ellipsis">
        <text class="tip-item">{{ item.area_name }}</text>
        <text class="tip-item">{{ item.serve_type }}</text>
      </view>
    </template>
    <template v-if="item.product == '写合同'">
      <view class="item-tip text-ellipsis">
        <text class="tip-item">{{ item.document_ids }}</text>
        <text class="tip-item">{{ item.docu_num }}份</text>
        <text class="tip-item">{{ item.docu_time_text }}</text>
      </view>
      <view class="item-tip text-ellipsis">
        <text class="tip-item">{{ item.area_name }}</text>
        <text class="tip-item">{{ item.serve_type }}</text>
      </view>
    </template>
    <template v-if="item.product == '审案子'">
      <view class="item-tip text-ellipsis">
        <text class="tip-item">{{ item.area_name }}</text>
        <text class="tip-item">{{ item.serve_type }}</text>
        <text class="tip-item">{{ item.docu_time_text }}</text>
      </view>
    </template>
    <template v-if="item.product == '刑事会见'">
      <view class="item-tip text-ellipsis">
        <text class="tip-item" v-if="item.accusation">{{ item.accusation }}</text>
        <text class="tip-item" v-else>具体涉嫌罪名请询问委托人</text>
        <text class="tip-item">会见{{ item.meet_num }}次</text>
      </view>
      <view class="item-tip text-ellipsis">
        <text class="tip-item" v-if="item.server_address">{{ item.server_address }}</text>
        <text class="tip-item" v-else>具体会见地点请询问委托人</text>
        <text class="tip-item">{{ item.meet_stage }}</text>
      </view>
      <view class="item-tip text-ellipsis">
        <text class="tip-item">{{ item.area_name }}</text>
        <text class="tip-item">{{ item.serve_type }}</text>
      </view>
    </template>
    <template v-if="item.product == '打官司'||item.pro_name == '打官司'">
      <!--      首页进来 我要接单  律师  法务 角色有的-->
      <view v-if="isshou=='1'">
        <view class="item-tip text-ellipsis" v-if="userInfo.is_lawyer=='1'">
          <text class="tip-item" v-if="item.server_address">{{ item.server_address.replace(/,/g, "") }} <text v-if="item.is_yidi=='1'" class="red" style="font-size: 24rpx">(异地)</text></text>
          <text class="tip-item">{{ item.organization}}</text>
        </view>
        <view class="item-tip text-ellipsis" v-if="userInfo.is_lawyer=='1'">
          <text class="tip-item">{{ item.stage }}</text>
          <text class="tip-item">{{ item.area_name }}</text>
        </view>
        <!-- 我的要求 -->
        <view class="item-tip" @click="zhankai(item.requirement)" v-if="item.requirement&&userInfo.is_fawu!='1'" :class="iszhankai&&item.requirement.length>20?'onehang autohang':'onehang'">
          <text class="tip-item">
            <image src="@/static/img/order-tip-order.png" class="order-tip-img" mode="widthFix"></image>
            {{ item.requirement }}
          </text>
          <span style="width: 30rpx; height: 30rpx;margin-top:4rpx"  v-if="item.requirement.length>20"><img style="width: 100%;height: 50%;"class="order-tip-img" :class="iszhankai?'xuanzhuan2':'xuanzhuan1'" src="@/static/img/ask-icon1.png" alt=""></span>
        </view>
        <!--        律师展示-->
        <view class="item-tip text-ellipsis" v-if="item.weituo_json != '' && item.weituo_json != undefined && userInfo.is_lawyer=='1'" v-for="(weituo,i) in item.weituo_json">
          <text class="tip-item">委{{i+1}} &nbsp;{{ weituo.self_name }}</text>
          <text class="tip-item" v-if="weituo.self_type">{{ weituo.self_code.slice(1,3).concat("************",weituo.self_code.slice(-3,-1)) }}</text>
          <text class="tip-item">{{ weituo.self_shenfen }} </text>
        </view>
        <view class="item-tip text-ellipsis" v-if="item.dui != '' && item.dui != undefined && userInfo.is_lawyer=='1'" v-for="(dui,i) in item.dui">
          <text class="tip-item">对{{i+1}} &nbsp;{{ dui.dui_name }}</text>
          <text class="tip-item" v-if="dui.dui_type">{{ dui.dui_code.slice(1,3).concat("************",dui.dui_code.slice(-3,-1)) }}</text>
        </view>
        <!--       法务展示-->
        <view class="item-tip text-ellipsis"  v-if="userInfo.is_fawu =='1'">
          <text class="tip-item">{{ item.area_name }}</text>
          <text class="tip-item">1个工作日完成</text>
          <text class="tip-item" v-if="item.price_type=='自费'">{{ item.price_type }}</text>
          <text class="tip-item" v-else>投资人支付</text>
        </view>
      </view>
      <!--      订单 页面进来 全部角色都有的 -->
      <view v-else-if="isshou=='2'">
        <view class="item-tip text-ellipsis" v-if="userInfo.is_fawu!='1'">
          <text class="tip-item" v-if="item.server_address">{{ item.server_address.replace(/,/g, "")  }}</text>
          <text class="tip-item">{{ item.organization}}</text>
        </view>
        <view class="item-tip text-ellipsis" v-if="userInfo.is_fawu!='1'">
          <text class="tip-item">{{ item.stage }}</text>
          <text class="tip-item">{{ item.area_name }}</text>
        </view>
        <!-- 我的要求 -->
        <view class="item-tip" @click="zhankai(item.requirement)" v-if="item.requirement&&userInfo.is_fawu!='1'" :class="iszhankai&&item.requirement.length>20?'onehang autohang':'onehang'">
          <text class="tip-item">
            <image src="@/static/img/order-tip-order.png" class="order-tip-img" mode="widthFix"></image>
            {{ item.requirement }}
          </text>
          <!-- <span style="width: 30rpx; height: 30rpx;"  v-if="item.requirement.length>20"><img style="width: 100%;height: 50%;"class="order-tip-img" :class="iszhankai?'xuanzhuan1':'xuanzhuan2'" src="@/static/img/ask-icon1.png" alt=""></span> -->
        </view>
        <!--        律师 投资人 （投资订单）展示-->
        <view class="item-tip text-ellipsis" v-if="item.weituo_json != '' && item.weituo_json != undefined && (userInfo.is_lawyer=='1'||(userInfo.is_touziren=='1'&&item.price_type!='自费'))" v-for="(weituo,i) in item.weituo_json">
          <text class="tip-item">委{{i+1}} &nbsp;{{ weituo.self_name }}</text>
          <text class="tip-item" v-if="weituo.self_type">{{ weituo.self_code.slice(1,3).concat("************",weituo.self_code.slice(-3,-1)) }}</text>
          <text class="tip-item">{{ weituo.self_shenfen }} </text>
        </view>
        <view class="item-tip text-ellipsis" v-if="item.dui != '' && item.dui != undefined && (userInfo.is_lawyer=='1'||(userInfo.is_touziren=='1'&&item.price_type!='自费'))" v-for="(dui,i) in item.dui">
          <text class="tip-item">对{{i+1}} &nbsp;{{ dui.dui_name }}</text>
          <text class="tip-item" v-if="dui.dui_type">{{ dui.dui_code.slice(1,3).concat("************",dui.dui_code.slice(-3,-1)) }}</text>
        </view>
        <!--       法务展示-->
        <view class="item-tip text-ellipsis"  v-if="userInfo.is_fawu =='1'">
          <text class="tip-item">{{ item.area_name }}</text>
          <text class="tip-item" v-if="item.price_type=='自费'">{{ item.price_type }}</text>
          <text class="tip-item" v-else>投资人支付</text>
        </view>
      </view>
      <!--      朋友待付 页面进来 全部角色都有的 -->
      <view v-else-if="isshou=='3'">
        <view class="item-tip text-ellipsis" :class="isshou=='3'?'padd0':''">
          <text :class="isshou=='3'?'tip-item font12':'tip-item'" v-if="item.server_address">{{ item.server_address.replace(/,/g, "")  }}</text>
          <text :class="isshou=='3'?'tip-item font12':'tip-item'" >{{ item.organization}}</text>
          <text :class="isshou=='3'?'tip-item font12':'tip-item'" >{{ item.area_name }}</text>
        </view>
        <view class="item-tip text-ellipsis" :class="isshou=='3'?'padd0':''">
          <text :class="isshou=='3'?'tip-item font12':'tip-item'" >{{ item.stage }}</text>
          <text :class="isshou=='3'?'tip-item font12':'tip-item'"  v-if="item.price_type=='自费'">{{ item.price_type }}</text>
          <text :class="isshou=='3'?'tip-item font12':'tip-item'"  v-else>投资人支付</text>
        </view>
        <view class="item-tip text-ellipsis" :class="isshou=='3'?'padd0':''">
          <text :class="isshou=='3'?'tip-item font12':'tip-item'" >{{ item.serve_type }}</text>
        </view>
      </view>
    </template>
    <!--我的要求弹出层 -->
    <uni-popup ref="popupRequirement" type="center">
      <order-popup-common morenWidth="660"  title="委托人的要求" @closePop="closePop('popupRequirement')">
        <scroll-view class="popup-con" scroll-y="true" slot="popup-con">
          <view style="padding:0 30rpx;">{{requirement}}</view>
        </scroll-view>
        <view class="ok-box" slot="popup-btn"><button type="default" class="ok-btn" @click="closePop('popupRequirement')">朕知道了</button></view>
      </order-popup-common>
    </uni-popup>
  </view>
</template>

<script>
export default {
  props:['item',"isshou","isProtect","userInfo"],
  data() {
    return {
      iszhankai:false,
      requirement:'',
    };
  },
  mounted(){
    this.init();
  },
  created() {
    console.log("======",this.item)
  },
  methods: {
    init(){
      if(this.item.weituo_json){
        this.item.weituo_json = JSON.parse( this.item.weituo_json);
      }
    },
    zhankai(requirement){
      // this.iszhankai = !this.iszhankai;
      this.requirement = requirement;
      // this.$refs.popupRequirement.open();
    }
  }
};
</script>

<style lang="scss">
.onehang{
  height: 34rpx;
  width: 99%;
  overflow: hidden;
  align-items: center;
  .tip-item{
    width: 648rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.onehang1{
  height: 34rpx;
  width: 99%;
  overflow: hidden;

  .tip-item{
    width: 648rpx;
    overflow: hidden;
    white-space: nowrap;
  }
}
.autohang{
  height: auto!important;
  .tip-item{
    width: 100%;
    white-space: normal;
  }
}
.xuanzhuan1{
  -webkit-transform:rotate(0deg);
  transform:rotate(0deg);
  -webkit-transition:-webkit-transform 0.5s linear;
  transition:transform 0.5s linear;
}
.xuanzhuan2{
  -webkit-transform:rotate(-90deg);
  transform:rotate(-90deg);
  -webkit-transition:-webkit-transform 0.5s linear;
  transition:transform 0.5s linear;
}
.tip-item{
  margin-right: 5px;
  font-size: 24rpx!important;
}
.font12{
  font-size: 24rpx!important;
}
.padd0{
  padding: 0!important;
}
::v-deep .order-tip-img {
  margin-top: -4px;
  width: 15px;
  margin-right: 5px;
  vertical-align: middle;
}
</style>
